<template>
  <div class="app-container">
    <div class="title">添加考卷</div>
    <div class="warn"><i class="el-icon-info"></i>考试相关配置项，建议设置完成测试无误后发送给考生，考试中途请勿修改，会影响考试结果</div>
    <!-- 步骤条 -->
    <!-- 使用 steps-wrapper 并设置固定宽度 -->
    <div class="steps-wrapper">
      <el-steps :active="active" :space="300" :align-center="true">
        <el-step title="创建考试"></el-step>
        <el-step title="试题设置"></el-step>
        <!-- <el-step title="考试设置"></el-step> -->
      </el-steps>
    </div>

    <!-- 根据当前步骤显示不同内容 -->
    <div class="content">
      <div v-if="active === 0">
        <el-form ref="form0Ref" :model="step0Data" :rules="step0Rules" label-width="80px">
          <el-form-item label="考卷名称" prop="name">
            <el-input v-model="step0Data.name" size="small" class="form-item" placeholder="请输入考试题目"></el-input>
          </el-form-item>
          <el-form-item label="所属班级" prop="fk_t_customer_class_id">
            <el-select v-model="step0Data.fk_t_customer_class_id" placeholder="请选择" size="mini" style="width: 300px">
              <!-- 手动添加的“无”选项 -->
              <el-option label="无" :value="0"></el-option>
              <el-option v-for="item in customerClassList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="考试说明" prop="remake">
            <el-input type="textarea" v-model="step0Data.remake" class="form-item"></el-input>
          </el-form-item>
          <el-form-item label="试卷类型" prop="type">
            <el-radio-group v-model="step0Data.type">
              <el-radio :label="0">随机抽取考试</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="考试时长" prop="exam_time">
            <div class="form-item-number">
              <el-input-number v-model="step0Data.exam_time" controls-position="right" :min="30" :max="120"
                size="small" />
              分钟
            </div>
          </el-form-item>
          <el-form-item label="及格分数" prop="passing_score">
            <div class="form-item-number">
              <el-input-number v-model="step0Data.passing_score" controls-position="right" :min="30" :max="100"
                size="small" />
              分
            </div>
          </el-form-item>
          <el-form-item label="显示分数" prop="is_show_score">
            <el-switch :value="step0Data.is_show_score === 1" @change="val => step0Data.is_show_score = val ? 1 : 0"
              active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>

          <el-form-item label="考试次数" prop="max_participate_num">
            <div class="form-item-number">
              <el-input-number v-model="step0Data.max_participate_num" controls-position="right" :min="1" :max="5"
                size="small" />
              次
            </div>
          </el-form-item>

        </el-form>
      </div>
      <div v-else-if="active === 1">
        <el-form ref="form1Ref" :model="step1Data" :rules="step1Rules" label-width="80px">
          <el-form-item label="组卷类型" prop="generation_type">
            <el-radio-group v-model="step1Data.generation_type">
              <el-radio :label="0">随机选题</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择题库" prop="fk_t_sctk_id">
            <div class="form-item-number">
              <el-button type="primary" @click="openCustomerDialog()" size="mini">选择题库</el-button>
              已选择 <span class="number">{{ step1Data.sctkName }}</span> 题库
            </div>

          </el-form-item>
          <el-form-item label="设置数量" prop="question_num">
            <div class="form-item-number">
              <el-input-number v-model="step1Data.question_num" controls-position="right" :min="10" :max="100"
                size="small" />
              题
            </div>

          </el-form-item>
          <el-form-item label="设置分值" prop="question_score">
            <div class="form-item-number">
              <el-input-number v-model="step1Data.question_score" controls-position="right" :min="1" :max="5"
                size="small" />
              分
            </div>

          </el-form-item>

        </el-form>
      </div>
    </div>


    <!-- 操作按钮 -->
    <div style="margin-top: 20px; text-align: center;">
      <el-button v-if="active !== 0" @click="prev" :disabled="active === 0">上一步</el-button>
      <el-button v-if="active !== 1" type="primary" @click="next" :disabled="active === 2">下一步</el-button>
      <el-button v-if="active === 1" type="primary" @click="next">提交</el-button>

    </div>
    <!-- 题库弹层 -->
    <sctk-list ref="sctkList" v-model="customerDialogVisible" :title="dialogTitle" @submit="selectCustomer">
    </sctk-list>
  </div>
</template>

<script>

import sctkList from '@/components/sctkList'
import { saveExamPaper } from '@/api/examPaper'
import { getCustomerClassList } from '@/api/customerClass';
export default {
  name: 'AddExamPaper',
  components: {
    sctkList
  },
  created() {
    const id = this.$route.params.id; // 只有编辑时才有值
    this.examPaperId = id
    this.getClassList();

  },
  data() {
    return {
      active: 0,// 当前步骤
      examPaperId: null,// 当前步骤
      customerDialogVisible: false, // 控制选择弹层的显示
      dialogTitle: '题库列表',
      customerClassList: [],
      // Step 0 表单数据
      step0Data: {
        name: '',
        fk_t_customer_class_id: 0,
        remake: '',
        type: 0,
        exam_time: 60,
        passing_score: 60,
        is_show_score: 0,
        max_participate_num: 1
      },
      // Step 0 校验规则
      step0Rules: {
        name: [
          { required: true, message: '请输入考卷名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择试卷类型', trigger: 'change' }
        ],
        exam_time: [
          { required: true, message: '请选择考试时长', trigger: 'change' },

        ],
        passing_score: [
          { required: true, message: '请选择及格分数', trigger: 'blur' },


        ],
        is_show_score: [
          { required: true, message: '请选择及格分数', trigger: 'blur' }
        ],
        max_participate_num: [
          { required: true, message: '请选择最大考试次数', trigger: 'blur' }
        ],

      },
      // Step 1 表单数据
      step1Data: {
        generation_type: 0,
        fk_t_sctk_id: null,
        sctkName: null,
        question_num: 10,
        question_score: 2,
      },
      // Step 1 校验规则
      step1Rules: {
        fk_t_sctk_id: [
          { required: true, message: '请选择题库', trigger: 'blur' }
        ],
        generation_type: [
          { required: true, message: '请选择组卷类型', trigger: 'change' }
        ],
        question_num: [
          { required: true, message: '请选择考题数量', trigger: 'change' }
        ],
        question_score: [
          { required: true, message: '请选择题目分值', trigger: 'blur' }
        ]
      },
    };
  },
  methods: {
    async next() {
      switch (this.active) {
        case 0:
          this.$refs.form0Ref.validate(valid => {
            if (valid) {
              this.active++;
            } else {
              return false;
            }
          });
          break;
        case 1:
          this.$refs.form1Ref.validate(valid => {
            if (valid) {
              // 提交表单
              if (this.examPaperId) {
                const form = { ...this.step0Data, ...this.step1Data, id: this.examPaperId }
                this.saveExamPaper(form)
              } else {
                const form = { ...this.step0Data, ...this.step1Data }
                this.saveExamPaper(form)
              }


            } else {
              console.log('Step 1 校验失败');
              return false;
            }
          });
          break;
        case 2:
          this.$refs.form2Ref.validate(valid => {
            if (valid) {
              alert('所有步骤提交成功！');
            } else {
              console.log('Step 2 校验失败');
              return false;
            }
          });
          break;
        default:
          break;
      }

    },
    prev() {
      if (this.active > 0) this.active--;
    },
    selectCustomer(row) {
      // 保存原始值，用于判断是否被修改
      console.log(row);

      this.step1Data.fk_t_sctk_id = row.id
      // this.form.siyuanName = row.full_name;
      this.step1Data.sctkName = row.name
      this.customerDialogVisible = false;
      this.$nextTick(() => { this.$refs.form1Ref.validateField('fk_t_sctk_id'); });
    },
    async saveExamPaper(form) {

      await saveExamPaper(form)
      //成功之后跳转回考卷列表
      this.$router.push('/examPaper');
    },
    openCustomerDialog() {
      this.customerDialogVisible = true;

    },
    // 获取班级信息
    async getClassList() {
      const { data } = await getCustomerClassList()
      // 转换逻辑
      const classList = data.map(item => ({
        value: item.id, // 将 id 映射为 value
        label: item.name // 将 name 映射为 label
      }));
      this.customerClassList = classList
    },
  },

};
</script>

<style scoped>
.app-container {
  margin: 10px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.title {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  /* 文字居中对齐 */
  margin-bottom: 10px;
  /* 给标题下方留出间距 */
  border-bottom: 1px solid #e8eaec;
}

.warn {
  display: block;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  /* 文字居中对齐 */
  margin-bottom: 10px;
  /* 给标题下方留出间距 */
  border-bottom: 1px solid #e8eaec;
  background: #fffbe6;
}

.steps-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  /* 确保占满父容器宽度 */
  max-width: 800px;
  /* 设置最大宽度，可以根据实际需求调整 */
  margin: 0 auto;
  /* 确保水平居中 */
}

.el-steps {
  width: 100%;
  /* 确保 steps 占满 steps-wrapper 宽度 */
}

.form-item-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-item {
  width: 300px;
}

.content {
  margin: 20px;
}
</style>